//pageQuiButton.vue
<template>
  <div id="pageQuiButton">
    <h1>按钮页面</h1>
    <div>
      <button>
        {{ha}}
      </button>
    </div>
    <div>
      <qui-btn v-on:btnClickEvent="doSth" msg="点击父子时间顺序"></qui-btn>
    </div>
    <qui-btn v-bind:msg="msgOk" @btnClickEvent="doSth1" class="small">
      <img slot="icon" class="ico" src="../assets/img/conform.png" />
    </qui-btn>
    <qui-btn :msg="msgDownload" @btnClickEvent="doSth2" class="small">
      <img slot="icon" class="ico" src="../assets/img/downLoad.png" />
    </qui-btn>
    <div>
      <qui-btn msg="啊哈哈">

      </qui-btn>
    </div>
<!--错误用法-->
    <!--<div>
      <qui-btn :msg="啊哈哈">

      </qui-btn>
    </div>-->
    <div>
      <qui-btn :msg="ha">

      </qui-btn>
    </div>
    <el-radio v-model="radio" label="1">备选项</el-radio>
    <el-radio v-model="radio" label="2">备选项</el-radio>
  </div>
</template>
<script>
  import quiBtn from '../components/quiButton.vue' /*引用*/


  export default {
    name: 'pageQuiButton',
    components: {
      'qui-btn': quiBtn /*注册自定义标签*/
    },
    props: {
      /*msgOk:{
          default: '确定',
      },
      msgDownload: {
          default: '下载',
      }*/
    },
    data() {
      return{
        ha: '啊heieh',
        msgOk: '确定',
        msgDownload: '下载',
        radio: '1',
      };
    },
    methods:{
      doSth:function(){
          console.log("父事件：自定义点击事件");
      },
      doSth1: function(){
        alert('111');
      },
      doSth2: function(){
        alert('222');
      }
    },
  };
</script>

<style>
.ico{
  width: 20px;
  height: 20px;
}
</style>
